<template>
  <HModal ok-text="确定" cancel-text="取消" @cancel="close" :height="600"
          :visible="visible" :width="1000" title="审批" class="flow-pass-wrapper">
    <Section title="评论内容">
      <FlowTextCraft
          :request="request" v-model="userTaskComment.comment"/>
    </Section>
<!--    <Section title="手签">-->
<!--      <FlowUserSign :request="request" v-model="userTaskComment.userSign"/>-->
<!--    </Section>-->
    <Section title="附件">
      <FlowAttachmentUpload
          :request="request" :disabled="false"
          v-model="userTaskComment.attachmentIds"/>
    </Section>

    <template slot="footer">
      <Dropdown>
        <Menu slot="overlay">
          <MenuItem @click="countUserSign" key="1">加签</MenuItem>
          <MenuItem @click="subtractUserSign" key="2">减签</MenuItem>

          <!--          <MenuItem @click="subtractUserSign" key="3">转办</MenuItem>-->
        </Menu>
        <Button> 更多操作
          <Icon type="down"/>
        </Button>
      </Dropdown>
      <Button @click="toForm">回退</Button>
      <Button type="danger" @click="end">不通过</Button>
      <Button type="primary" @click="complete">通过</Button>
    </template>
  </HModal>
</template>

<script>
import {Button, Dropdown, Icon, Menu, Modal, notification} from "ant-design-vue";
import FlowTextCraft from './components/FlowPassTextCraft';
import Section from '@/components/Section/Section.vue';
import FlowAttachmentUpload from './components/FlowAttachmentUpload.vue';
import {createProps} from '@/utils';
import FlowUserSign from '@/components/flow/FlowUserSign/FlowUserSign.vue';
import HModal from '@/components/HModal/HModal.vue';
import FlowRequest from '@/request/FlowRequest';
import {createService} from '@/request/service';

export default {
  name: "FlowPass",
  components: {
    FlowUserSign, HModal,
    Modal, Dropdown, Button, Menu,
    FlowTextCraft,
    Section,
    MenuItem: Menu.Item, Icon,
    FlowAttachmentUpload
  },
  props: {
    UserTaskConfigModal: createProps(Object),
    formModel: createProps(Function),
    flowUserTaskId: createProps(String),
    request: createProps(Object, () => ({
      baseURL: '/h-flow',
      headers: {},
    }))
  },
  data() {
    return {
      flowUserTask: {},
      userTaskComment: {
        attachmentIds: undefined,
        userSign: undefined,
        comment: undefined
      },
      visible: false,
      userTask: {
        nodeId: "任务id",
        taskName: "任务名称",
        notify: "0", // 是否知会
        executeWay: "单用户", // 执行方式
        mustSignature: "0", // 强制手签
      },
      htmlData: "",
      base64Image: ""
    };
  },
  methods: {
    countUserSign() {
      let UserTaskConfigModal = this.UserTaskConfigModal;
      let flowUserTaskId = this.flowUserTaskId;
      FlowRequest(this.request).countUserSign({flowUserTaskId, UserTaskConfigModal});
    },
    subtractUserSign() {
      let flowUserTaskId = this.flowUserTaskId;
      FlowRequest(this.request).subtractUserSign({flowUserTaskId});
    },
    // 打开签字
    openSketchpad() {
      this.$refs.flowSketchpad.openSignatureModal();
    },
    open() {
      this.visible = true;
    },
    // 保存手签
    addSignature(base64Image) {
      this.base64Image = base64Image;
    },
    handleOK() {
      console.log(this.userTaskComment);
    },
    toForm() {
      let flowUserTaskId = this.flowUserTaskId;
      let userTaskComment = {...this.userTaskComment};
      FlowRequest(this.request).toForm({flowUserTaskId, ...userTaskComment}, () => {
        this.close();
        this.ok();
      });
    },
    end() {
      let flowUserTaskId = this.flowUserTaskId;
      let userTaskComment = {...this.userTaskComment};
      FlowRequest(this.request).end({flowUserTaskId, ...userTaskComment}, () => {
        this.close();
        this.ok();
      });
    },
    complete() {
      // if (this.flowUserTask.mustSignature && !this.userTaskComment.userSign) {
      //   notification.warn({message: '当前节点需要签名, 请您签字'})
      //   return;
      // }
      let flowUserTaskId = this.flowUserTaskId;
      let formModel = this.formModel && this.formModel() || undefined;
      let userTaskComment = {...this.userTaskComment};
      FlowRequest(this.request).complete({flowUserTaskId, formModel, userTaskComment}, () => {
        this.close();
        this.ok();
      });
    },
    ok() {
      this.$emit('ok');
    },
    close() {
      this.visible = false;
    },
    loadFlowUserTask() {
      if(!this.flowUserTaskId) return;
      createService(this.request).get('/flow/getFlowUserTaskById', {params: {flowUserTaskId: this.flowUserTaskId}}).then(flowUserTask => {
        if (!flowUserTask) {
          // notification.warn({message: '没有找到用户任务, 请刷新页面后重试'})
          return this.flowUserTask = flowUserTask;
        }
        this.flowUserTask = flowUserTask;
      });
    },
  },
  watch: {
    flowUserTaskId: {
      handler() {
        this.loadFlowUserTask()
      },
      immediate: true
    }
  }
};
</script>

<style>
.flow-pass-wrapper::-webkit-scrollbar {
  width: 0;
}
</style>
